<template>
<div>
	
	<el-row>
	  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
	  <el-tag>基本信息</el-tag>
	</el-row>
	<el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" size="small" class="demo-ruleForm">
	<el-form-item label="申请单位名称" prop="applicant_name">
		<el-input v-model="ruleForm.applicant_name" placeholder="请填写申请单位名称"></el-input>
	</el-form-item>
	<el-form-item label="申请单位地址"  prop="applicant_addres">
		<el-input v-model="ruleForm.applicant_addres" placeholder="请填写申请单位地址"></el-input>
	</el-form-item>
	<el-form-item label="单位联系人" prop="unit_contact">
	<el-input v-model="ruleForm.unit_contact" placeholder="请填写单位联系人"></el-input>
	</el-form-item>
	<el-form-item label="联系电话" prop="telephone">
	<el-input v-model="ruleForm.telephone" placeholder="请填写联系电话"></el-input>
	</el-form-item>
	<el-form-item label="E-mail" prop="E_mail">
	<el-input v-model="ruleForm.E_mail" placeholder="请填写电子邮箱"></el-input>
	</el-form-item>
	<el-form-item label="业务系统名称" prop="business_system_name">
	<el-input v-model="ruleForm.business_system_name" placeholder="请填写业务系统名称"></el-input>
	</el-form-item>
	<el-form-item label="接口人/电话" prop="interface_tel">
	<el-input v-model="ruleForm.interface_tel" placeholder="请填写接口人/电话"></el-input>
	</el-form-item>

	 <el-row>
	   <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
	   <el-tag>物理机</el-tag>
	 </el-row>

	  <el-form-item label="网络需求" prop="network_requirements">
		<el-input v-model="ruleForm.network" placeholder="示例:互联网/电子政务网/xxx专网"></el-input>
	  </el-form-item>
	  <el-form-item label="防火墙策略（源/目的IP/端口、协议）" prop="firewall_policy">
		<el-input v-model="ruleForm.firewall_policy" placeholder="示例:xxx端口需映射"></el-input>
	  </el-form-item>
	  <el-form-item label="备注" prop="remarks1">
	  		<el-input v-model="ruleForm.remarks1"></el-input>
	  </el-form-item>
	  
		 <el-row>
		   <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
		 </el-row>
	</el-form-item>
	    <el-button type="primary" @click="submitForm">提交审批</el-button>
	    <el-button @click="resetForm('ruleForm')">重置</el-button>
	  </el-form-item>
	  
	</el-form>
	    
	
</div>
</template>


<script>
import axios from 'axios'
export default {
	data() {
		return {
			ruleForm: {
				applicant_name: '',
				applicant_addres:'',
				unit_contact: '',
				telephone: '',
				E_mail: '',
				business_system_name: '',
				interface_tel: '',
				network_requirements: '',
				firewall_policy: '',
				remarks1: '',
			},
			rules: {
				applicant_name: [
					{ required: true, message: '请输入申请单位名称', trigger: 'blur' }],
				applicant_addres: [
					{ required: true, message: '请输入申请单位地址', trigger: 'blur' }],
				unit_contact: [
					{ required: true, message: '请输入单位联系人', trigger: 'blur' }],
				telephone: [
					{ required: true, message: '请输入联系电话', trigger: 'blur' }],
				E_mail: [
					{ required: true, message: '请输入邮箱E-mail', trigger: 'blur' }],
				business_system_name: [
					{ required: true, message: '请输入业务系统名称', trigger: 'blur' }],
				interface_tel: [
					{ required: true, message: '请输入接口人/电话', trigger: 'blur' }],
				// network_requirements: [
				// 	{ required: true, message: '示例:互联网/电子政务网/xxx专网', trigger: 'blur' }],
				firewall_policy: [
					{ required: true, message: '示例:xxx端口需映射', trigger: 'blur' }],
			},
		};
	},
	methods: {
		handleClick(tab, event) {
			console.log(tab, event);
		},
		submitForm(){
			let name = localStorage.getItem('cur_username')
			axios
			.post('/api/init_managed/',this.ruleForm,{
					params:{
						name:name
					}
				},
			)
			.then((res) =>{
				// console.log(this.addSite)
				if(res.data.code===201){
					this.$message({
						message: '添加成功！',
						type: 'success'
					})
					this.$router.push('dealt_equipment_managed')
				}
			})
			.catch((error)=>{
					console.log(error);
			})
		},
		resetForm(formName) {
				this.$refs[formName].resetFields();
		},
	},
}
</script>